<template>
  <div class="top"></div>
    <div class="topNav">
        <svg class="icon" aria-hidden="true" @click="goToPage">
    <use xlink:href="#icon-xiangzuojiantou"></use>
</svg>
<span>我的消息</span>
<div class="topNavright">
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-saoba"></use>
</svg>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-a-xinyoujianyoujian"></use>
</svg>
</div>
    </div>
    <div class="contact-list">
      <div v-for="contact in contacts" :key="contact.id" class="contact-item" @click="gotopeoplenews" >
        <img :src="contact.avatar" alt="Avatar" class="avatar" />
        <span class="nickname">{{ contact.nickname }}</span>
      </div>
    </div>
    <!-- 为了让底部组件在合适的位置设置的，没实际用处 -->
    <div class="footer">
      <footerNav/>
    </div>

  </template>
  
  <script>
  import axios from 'axios';
  import footerNav from '@/components/home/footerNav.vue';
  
  export default {
    components:{
        footerNav,
    },
    data() {
      return {
        contacts: []
      };
    },
    mounted() {
      this.fetchUsers();
    },
    methods: {
      goToPage(){
            this.$router.push('/');
        },
        gotopeoplenews(){
            this.$router.push('peoplenews');
        },
      fetchUsers() {
        axios.get('http://localhost:5000/api/auth/contacts')
          .then(response => {
            this.contacts = response.data;
          })
          .catch(error => {
            console.error('Error fetching contacts:', error);
          });
      }
    }
  };
  </script>
  
  <style scoped>
  .top{
    width:7.78rem ;
    height: .88rem;
    background-color:lightseagreen;
}
.topNav{
    display:flex;
    width: 7.78rem;
    height: .64rem;
    margin-top: 10px;
   
}
.top .icon{
    margin-left: 10px;
}

 .topNav span{
 margin-left: 2.5rem;
 font-size: 22px;
}
.topNavright{
    margin-left: 1.9rem;
  
}
.topNavright .icon{
    margin-left: 5px;
}
  .contact-list {
    display: flex;
    flex-direction: column;
  }
  .contact-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .nickname {
    font-size: 16px;
  }
  .footer{
    position: fixed;
    bottom: 50px;
  }
  </style>
  